<template>
  <div class="statistics-wrapper">
    <div class="search">
      <el-form class="search-form" inline>
        <el-form-item label="时间段">
          <el-date-picker
            v-model="timeArr"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handleChangeTime"
            :clearable="false"
          />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handleSearch()"
        ><svg-icon name="search" size="14px" />搜索</el-button
      >
      <el-button @click="handleReset()"
        ><svg-icon name="reset" size="17px" />重置</el-button
      >
    </div>
    <div class="content">
      <div class="content-top">
        <div class="title">访客数统计</div>
        <div class="content-top-chart">
          <DrawEcharts
            ref="taskRef"
            v-if="taskOptions"
            :options="taskOptions"
          />
        </div>
      </div>
      <div class="content-bottom">
        <div class="content-bottom-left">
          <div class="title">进出园区访客人/车数统计</div>
          <div class="content-top-chart">
            <DrawEcharts
              ref="personAndCarRef"
              v-if="personAnaCarOptions"
              :options="personAnaCarOptions"
            />
          </div>
        </div>
        <div class="content-bottom-right">
          <div class="title">单位访客量排名</div>
          <div class="content-bottom-right-content">
            <LinePart
              type="vertical"
              color="#00C29A"
              lineColor="linear-gradient(90deg, #BDEFE0 0%, #5BD6B2 98%)"
              :detail="rankList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import DrawEcharts from '@/components/draw-echarts.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import moment from 'moment'
import LinePart from './components/linePart.vue'
import {
  getVisitorStatistics,
  getVisitorRanking,
  getParkVisitorAndCar,
} from '@/api/manager/visitorManage/statistics.js'
const searchParams = ref({
  startTime: undefined,
  endTime: undefined,
})
const timeArr = ref([])
const handleChangeTime = () => {
  if (timeArr.value && timeArr.value.length > 0) {
    searchParams.value.startTime = timeArr.value[0]
    searchParams.value.endTime = timeArr.value[1]
  } else {
    searchParams.value.startTime = undefined
    searchParams.value.endTime = undefined
  }
}
const taskOptions = ref(null)
const initOptions = async () => {
  const res = await getVisitorStatistics({ ...searchParams.value })
  if (!res.success) {
    ElMessage.error(res.message)
    return
  }
  taskOptions.value = getLineOptions(res.data)
}
const personAnaCarOptions = ref(null)
const initPersonAnaCarOptions = async () => {
  const res = await getParkVisitorAndCar({ ...searchParams.value })
  if (!res.success) {
    ElMessage.error(res.message)
    return
  }
  personAnaCarOptions.value = getLineOptions1(res.data)
}
const getLineOptions = (data) => {
  const xAixsData = []
  const yAixsData1 = []
  const yAixsData2 = []
  const yAixsData3 = []
  data.forEach((item) => {
    xAixsData.push(item.dateTime)
    yAixsData1.push(item.appointmentCount)
    yAixsData2.push(item.carCount)
    yAixsData3.push(item.peopleCount)
  })
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      data: ['预约数', '访客车辆数', '访客人数'],
    },
    grid: {
      top: '30',
      left: '30',
      right: '30',
      bottom: '30',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAixsData,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#757575',
          fontWeight: 400,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#D5DEED',
          },
        },
        axisLabel: {
          color: '#757575',
          fontWeight: 400,
        },
      },
    ],
    series: [
      {
        name: '预约数',
        type: 'line',
        stack: 'Total',
        emphasis: {
          focus: 'series',
        },
        data: yAixsData1,
        lineStyle: {
          color: '#009ED2',
        },
        areaStyle: {
          color: '#009ED2',
          opacity: 0.3,
        },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#009ED2',
          borderWidth: 2,
        },
      },
      {
        name: '访客车辆数',
        type: 'line',
        stack: 'Total',
        emphasis: {
          focus: 'series',
        },
        data: yAixsData2,
        lineStyle: {
          color: '#8F6CB9',
        },
        areaStyle: {
          color: '#8F6CB9',
          opacity: 0.3,
        },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#8F6CB9',
          borderWidth: 2,
        },
      },
      {
        name: '访客人数',
        type: 'line',
        stack: 'Total',
        emphasis: {
          focus: 'series',
        },
        data: yAixsData3,
        lineStyle: {
          color: '#1ED162',
        },
        areaStyle: {
          color: '#1ED162',
          opacity: 0.3,
        },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#1ED162',
          borderWidth: 2,
        },
      },
    ],
  }
  return option
}
const getLineOptions1 = (data) => {
  const xAixsData = []
  const yAixsData1 = []
  const yAixsData2 = []
  const yAixsData3 = []
  const yAixsData4 = []
  data.inParkList.forEach((item) => {
    xAixsData.push(item.dateTime)
    yAixsData3.push(item.carCount)
    yAixsData1.push(item.peopleCount)
  })
  data.outParkList.forEach((item) => {
    yAixsData4.push(item.carCount)
    yAixsData2.push(item.peopleCount)
  })
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    grid: {
      top: '30',
      left: '30',
      right: '30',
      bottom: '30',
      containLabel: true,
    },
    legend: {
      data: ['入园人数', '出园人数', '入园车辆', '出园车辆'],
    },
    xAxis: [
      {
        type: 'category',
        data: xAixsData,
        axisPointer: {
          type: 'shadow',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#757575',
          fontWeight: 400,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '(人)',
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#D5DEED',
          },
        },
        axisLabel: {
          color: '#757575',
          fontWeight: 400,
        },
      },
      {
        type: 'value',
        name: '(辆)',
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#D5DEED',
          },
        },
        axisLabel: {
          color: '#757575',
          fontWeight: 400,
        },
      },
    ],
    series: [
      {
        name: '入园人数',
        type: 'line',
        yAxisIndex: 1,
        data: yAixsData1,
        lineStyle: {
          color: '#009ED2',
        },
        // areaStyle: {
        //   color: '#009ED2',
        //   opacity: 0.3,
        // },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#009ED2',
          borderWidth: 2,
        },
      },
      {
        name: '出园人数',
        type: 'line',
        yAxisIndex: 1,
        data: yAixsData3,
        lineStyle: {
          color: '#1ED162',
        },
        // areaStyle: {
        //   color: '#1ED162',
        //   opacity: 0.3,
        // },
        itemStyle: {
          color: '#ffffff',
          borderColor: '#1ED162',
          borderWidth: 2,
        },
      },
      {
        name: '入园车辆',
        type: 'bar',
        data: yAixsData2,
        barWidth: 20,
        itemStyle: {
          color: '#009ED2',
          opacity: 0.7,
        },
      },
      {
        name: '出园车辆',
        type: 'bar',
        data: yAixsData4,
        barWidth: 20,
        itemStyle: {
          color: '#1ED162',
          opacity: 0.7,
        },
      },
    ],
  }
  return option
}
const rankList = ref([])
const initRank = async () => {
  const res = await getVisitorRanking({ ...searchParams.value })
  if (!res.success) {
    ElMessage.error(res.message)
    return
  }
  rankList.value = res.data
}
const handleSearch = () => {
  initOptions()
  initPersonAnaCarOptions()
  initRank()
}
const handleReset = () => {
  const startOfMonth = moment().subtract(30, 'days').format('YYYY-MM-DD')
  const endOfMonth = moment().format('YYYY-MM-DD')
  timeArr.value = [startOfMonth, endOfMonth]
  handleChangeTime()
  initOptions()
  initPersonAnaCarOptions()
  initRank()
}
const handleExport = () => {}
onMounted(() => {
  const startOfMonth = moment().subtract(30, 'days').format('YYYY-MM-DD')
  const endOfMonth = moment().format('YYYY-MM-DD')
  timeArr.value = [startOfMonth, endOfMonth]
  handleChangeTime()
  initOptions()
  initPersonAnaCarOptions()
  initRank()
})
</script>
<style lang="scss" scoped>
.statistics-wrapper {
  width: 100%;
  height: 100%;
  .search {
    width: 100%;
    height: 70px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    border-radius: 4px;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 20px 30px 0 30px;
    display: flex;
  }
  .content {
    width: 100%;
    height: calc(100% - 90px);
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    &-top {
      width: 100%;
      height: 300px;
      box-sizing: border-box;
      border-bottom: 1px solid #d5deed;
      &-chart {
        width: 100%;
        height: calc(100% - 36px);
        box-sizing: border-box;
        padding: 15px;
      }
    }
    &-bottom {
      width: 100%;
      height: calc(100% - 300px);
      min-height: 350px;
      box-sizing: border-box;
      display: flex;
      &-left {
        width: 60%;
        height: 100%;
      }
      &-right {
        width: 40%;
        height: 100%;
        &-content {
          width: 100%;
          height: calc(100% - 50px);
          box-sizing: border-box;
          padding: 20px;
          overflow-y: auto;
        }
      }
    }
  }
  .title {
    width: 100%;
    padding: 20px 30px 0 30px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: #151515;
    position: relative;
    &::before {
      content: ' ';
      position: absolute;
      width: 4px;
      height: 16px;
      background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
      border-radius: 2px;
      top: 20px;
      left: 20px;
    }
  }
}
</style>
